@if (showMarkdown) {
  <markdown class="docs" [content]="this.currentDoc.content"></markdown>
}
<choose-accounts
  [showChooseAccounts]="chooseUserAccountsVisible"
  [steamDirectory]="steamDirectoryForChooseAccounts"
  (showAccounts)="chooseUserAccountsVisible = $event"
  (accountsJoined)="setUserAccounts($event)"
>
</choose-accounts>
<div class="nestedForm">
  <label>
    <span class="infoButton infoIcon" (click)="presetsInfoClick()"> </span>
    Community Presets
  </label>
  <ng-select
    placeholder="Search for preset"
    [allowEmpty]="true"
    [emitOnly]="false"
    ngModel
    (ngModelChange)="setPreset($event)"
    [searchable]="true"
    [sectionsMap]="presetsSections"
    [values]="configPresets | keys"
  >
  </ng-select>
  <ng-nested-form
    (parentFormChange)="userForm = $event"
    (showMarkdown)="updateShowMarkdown($event)"
    [nestedGroup]="nestedGroup"
  ></ng-nested-form>
</div>
<div class="menu" drag-scroll>
  <ng-container *ngIf="configurationIndex === -1; else moreOptions">
    <div (click)="saveForm()" style="margin-right: auto">
      {{ lang.buttons.save }}
    </div>
    <div
      *ngIf="(getDeletedConfigurations() | async).length !== 0"
      (click)="restoreForm()"
    >
      {{ lang.buttons.undoDelete }}
    </div>
    <div (click)="updateShowMarkdown(true); openFAQ()">
      {{ lang.buttons.faq }}
    </div>
    <div
      *ngIf="showMarkdown"
      class="dangerousButton"
      (click)="updateShowMarkdown(false)"
    >
      Close Docs
    </div>
  </ng-container>
  <ng-template #moreOptions>
    <div (click)="updateForm()">{{ lang.buttons.save }}</div>
    <div (click)="saveForm()">{{ lang.buttons.copy }}</div>
    <div (click)="testForm()">{{ lang.buttons.testParser }}</div>
    <div
      class="dangerousButton"
      (click)="deleteForm()"
      style="margin-right: auto"
    >
      {{ lang.buttons.delete }}
    </div>
    <div
      *ngIf="(getDeletedConfigurations() | async).length !== 0"
      (click)="restoreForm()"
    >
      {{ lang.buttons.undoDelete }}
    </div>
    <div *ngIf="isUnsaved" (click)="undoChanges()">
      {{ lang.buttons.undoChanges }}
    </div>
    <div
      (click)="toClipboard()"
      [title]="lang.buttons.toClipboard"
      class="icon_button"
    >
      <svg copy-icon [title]="lang.buttons.toClipboard"></svg>
    </div>
    <div (click)="updateShowMarkdown(true); openFAQ()">
      {{ lang.buttons.faq }}
    </div>
    <div
      *ngIf="showMarkdown"
      class="dangerousButton"
      (click)="updateShowMarkdown(false)"
    >
      Close Docs
    </div>
  </ng-template>
</div>
